// 初始化可视化图表
function initCharts() {
    // 设备分布热力图
    const heatmapChart = echarts.init(document.getElementById('deviceHeatmap'));
    // 作业效率散点图
    const scatterChart = echarts.init(document.getElementById('efficiencyScatter'));
    // 三维堆存视图
    const threeDChart = echarts.init(document.getElementById('cargo3D'));

    // 模拟数据
    const heatmapData = generateHeatmapData();
    const scatterData = generateScatterData();
    const threeDData = generate3DData();

    // 热力图配置
    heatmapChart.setOption({
        tooltip: {},
        visualMap: {
            min: 0,
            max: 100,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: 15
        },
        geo: {
            map: 'none',
            roam: true,
            itemStyle: {
                areaColor: '#f5f5f5',
                borderColor: '#999'
            }
        },
        series: [{
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: heatmapData
        }]
    });

    // 散点图配置
    scatterChart.setOption({
        tooltip: {},
        xAxis: { type: 'value', name: '作业时长(分钟)' },
        yAxis: { type: 'value', name: '效率指数' },
        series: [{
            type: 'scatter',
            data: scatterData,
            symbolSize: 12,
            itemStyle: {
                color: function(param) {
                    return param.value[2] > 80 ? '#5470c6' : '#91cc75';
                }
            }
        }]
    });

    // 三维视图配置
    threeDChart.setOption({
        tooltip: {},
        visualMap: {
            show: false,
            dimension: 2,
            min: 0,
            max: 100,
            inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] }
        },
        xAxis3D: { type: 'value', name: '堆场X轴' },
        yAxis3D: { type: 'value', name: '堆场Y轴' },
        zAxis3D: { type: 'value', name: '堆存高度' },
        grid3D: { viewControl: { projection: 'orthographic' } },
        series: [{
            type: 'bar3D',
            data: threeDData,
            shading: 'color',
            itemStyle: { opacity: 0.8 }
        }]
    });

    // 窗口自适应
    window.addEventListener('resize', () => {
        heatmapChart.resize();
        scatterChart.resize();
        threeDChart.resize();
    });
}

// 生成热力图测试数据
function generateHeatmapData() {
    const data = [];
    // 模拟港口区域坐标
    for (let x = 0; x < 10; x++) {
        for (let y = 0; y < 8; y++) {
            data.push([x, y, Math.random() * 100]);
        }
    }
    return data;
}

// 生成散点图测试数据
function generateScatterData() {
    return Array.from({ length: 50 }, () => [
        Math.random() * 120 + 30,   // 作业时长
        Math.random() * 40 + 60,    // 效率值
        Math.random() * 40 + 60     // 颜色值
    ]);
}

// 生成三维数据
function generate3DData() {
    return Array.from({ length: 20 }, (_, i) => [
        Math.floor(i / 5),          // X坐标
        i % 5,                      // Y坐标
        Math.random() * 8 + 2       // 堆存高度
    ]);
}

// 初始化执行
window.addEventListener('DOMContentLoaded', initCharts);